<template>
<div class="unread">
  <el-scrollbar height="100%" v-if="info.length!==0" >
    <el-timeline>
      <transition-group name="list-anime" appear>
        <el-timeline-item v-for="(item,index) in info" center  placement="top" color="#3498DB" size="large" ref="timeItem"
                          :key="item.id" class="timeItem">
            <el-card class="msg hvr-grow">
              <template #header>
                <div class="card-header">
                  <span>消息:{{item.id}}</span>
                  <span style="font-size: 20px;letter-spacing: 0.10em">{{item.date}}</span>
                  <div>
                    <el-tooltip effect="dark" content="标记为已读" placement="left-start" >
                      <el-button type="primary" circle icon="fa fa-check" class="hvr-push" @click="setRead(item,index)"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="移动到回收站" placement="bottom-start">
                      <el-button type="danger" circle icon="el-icon-delete" class="hvr-push" @click="deleteInfo(item,index)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </template>
              <div class="card-content">
                {{item.description}}
              </div>
            </el-card>
        </el-timeline-item>
      </transition-group>
    </el-timeline>
  </el-scrollbar>
  <div v-if="info.length === 0">
    <el-empty :image-size="450" description="暂无数据"></el-empty>
  </div>
</div>
</template>

<script>
import {deleteInfo, getUnreadInfo, setReadInfo} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "unreadInfo",
  mounted() {
    getUnreadInfo({},{
      "satoken":localStorage.getItem("satoken")
    })
    .then(res=>{
      if (res.ret === 0){
        this.info = res.data
      }else{
        ElMessage.warning({
          type: 'warning',
          message: res.msg
        })
      }
    })
    .catch(err=>{
      console.log(err)
      ElMessage.error({
        type:'error',
        message: err
      })
    })
  },
  methods:{
    setRead(item,index){
      if(item!==null||true){

        item.date = this.$moment(item.date)
        setReadInfo({
          ...item
        },{
          "satoken": localStorage.getItem("satoken")
        }).then(res=>{
          console.log(res)
        }).catch(err=>{
          console.log(err)
        })
        this.info.splice(index,1)
      }else{
        ElMessage.warning({
          type: 'warning',
          message: '信息不存在'
        })
      }
    },
    deleteInfo(item,index){
      if (item!==null||true){
        item.date = this.$moment(item.date)
        deleteInfo({
          ...item
        },{
          "satoken" : localStorage.getItem("satoken")
        })
            .then(res=>{
              if (res.ret === 0){
                ElMessage.success({
                  type: 'success',
                  message: res.msg
                })
              }
              else{
                ElMessage.warning({
                  type: 'warning',
                  message: res.msg
                })
              }
            })
            .catch(err=>{
              console.log(err)
              ElMessage.error({
                type: 'error',
                message: err
              })
            })
        this.info.splice(index,1)
      }
    }
  },
  data(){
    return{
      info:[],
    }
  }
}
</script>

<style scoped>
.timeItem{
  padding-left: 80px;
  transition: all 0.7s ease;
}

.list-anime-move{
  transition: transform 1s;
}
/*.list-anime-enter-from,.list-anime-leave-to{
  transform: translateY(50px);
}*/
.list-anime-enter-active{
  animation: zoomIn 0.75s;
}
.list-anime-leave-active{
  position: absolute;
  animation: fadeOutRight 1s;
}

.card-content{
  font-size: 20px;
  letter-spacing: 0.15em;
}
.card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.msg{
  width: 850px;
  height: auto;
}

.unread{
  position: relative;
  height: 100%;
}
</style>